<template>
	<div class="layout-padding">
		<div class="escape" ref="domRef">
			<div class="escape_top">
				<el-tooltip content="全屏" placement="top">
					<el-button type="primary" @click="toggleFullScreen" v-if="!isFullscreen" class="escape_top_fullScreen" icon="FullScreen" link></el-button>
				</el-tooltip>
				<div class="escape_top_title">智慧环保平台</div>
				<div class="escape_top_date">{{ formatDate(date, 'YYYY年mm月dd日 WWW HH:MM:SS') }}</div>
			</div>
			<div class="escape_content">
				<el-row :gutter="4" style="height: 100%">
					<el-col :span="6" style="height: 100%">
						<div class="escape_content_flex">
							<div class="flex flex-col mb-4 escape_content_flex_item">
								<div class="py-2 pl-2 font-semibold">空气质量</div>
								<Air class="h-[calc(100%-40px)] p-4" />
							</div>
							<div class="flex flex-col mb-4 escape_content_flex_item">
								<div class="py-2 pl-2 font-semibold">污染TOP10</div>
								<Pollute class="h-[calc(100%-40px)] p-4" />
							</div>
							<div class="flex flex-col escape_content_flex_item">
								<div class="py-2 pl-2 font-semibold">网格员绩效</div>
								<Grid class="h-[calc(100%-40px)] py-1 px-4" />
							</div>
						</div>
					</el-col>
					<el-col :span="12" style="height: 100%">
						<div class="escape_content_flex">
							<div class="escape_content_flex_item">
								<MapArea class="h-full" />
							</div>
							<div class="item_bg h-[calc(33.33%-11px)] mt-4">
								<div class="flex items-center justify-between py-2 pl-2 font-semibold">
									<div>监测因子数据</div>
									<div class="pr-[120px]">本月在线天数:12天（52.17%）</div>
								</div>
								<Divisor class="h-[calc(100%-40px)] p-4" />
							</div>
						</div>
					</el-col>
					<el-col :span="6" style="height: 100%">
						<div class="escape_content_flex">
							<div class="flex flex-col mb-4 escape_content_flex_item">
								<div class="py-2 pl-2 font-semibold">项目概况</div>
								<Project class="h-[calc(100%-40px)] p-4" />
							</div>
							<div class="flex flex-col mb-4 escape_content_flex_item">
								<div class="py-2 pl-2 font-semibold">数据环比</div>
								<Chain class="h-[calc(100%-40px)] p-4" />
							</div>
							<div class="flex flex-col escape_content_flex_item">
								<div class="py-2 pl-2 font-semibold">溯源分析</div>
								<Source class="h-[calc(100%-40px)] p-1" />
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script setup name="dataScreen" lang="ts">
import { nextTick } from 'vue';
import { useFullscreen, tryOnUnmounted, useDebounceFn } from '@vueuse/core';
import { useEventListener } from '/@/hooks/event/useEventListener';
import { formatDate } from '/@/utils/formatTime';
import Air from './components/air.vue';
import Pollute from './components/pollute.vue';
import Project from './components/project.vue';
import Chain from './components/chain.vue';
import Source from './components/source.vue';
import MapArea from './components/map.vue';
import Divisor from './components/divisor.vue';
import Grid from './components/grid.vue';
const domRef = ref();
const { toggle: toggleDom, isFullscreen } = useFullscreen(domRef);
const date = ref(new Date());
let resizeFn = resize;
let removeResizeFn = () => {};
setInterval(() => {
	date.value = new Date();
}, 1000);
resizeFn = useDebounceFn(resize, 200);
// 初始化图表
function initEcharts() {
	const { removeEvent } = useEventListener({
		el: window,
		name: 'resize',
		listener: resizeFn,
	});
	removeResizeFn = removeEvent;
}
function resize() {}
onMounted(() => {
	nextTick(() => {
		initEcharts();
	});
});
function toggleFullScreen() {
	toggleDom();
}
tryOnUnmounted(() => {
	removeResizeFn();
});
</script>
<style lang="scss" scoped>
div,
span {
	font-family: 'Microsoft YaHei', 'Times New Roman';
}
.escape {
	background-image: url('/@/assets/images/background.png');
	background-size: 100% 100%;
	background-position: center top;
	background-repeat: no-repeat;
	height: calc(100vh - 124px);
	padding-bottom: 8px;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
	&_content {
		height: calc(100% - 70px);
		&_flex {
			height: 100%;
			color: #fff;
			padding-left: 6px;
			padding-right: 6px;
			display: flex;
			flex-direction: column;
			.item_bg {
				background-image: url('/@/assets/images/frame.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			&_item {
				flex: 1;
				background-image: url('/@/assets/images/frame.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}
	}
	&_top {
		height: 70px;
		width: 100%;
		text-align: center;
		position: relative;
		&_title {
			font-size: 26px;
			line-height: 50px;
			// font-weight: 600;
			color: #fff;
		}
		&_date {
			color: #fff;
			line-height: 40px;
			position: absolute;
			top: 0;
			right: 120px;
		}
		&_fullScreen {
			position: absolute;
			top: 6px;
			left: 10px;
		}
	}
}
</style>
